<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <i class="fa fa-angle-left" @click="$router.go(-1)"></i>
      <span>商品管理</span>
      <i class="fa fa-plus" @click="addFood" title="新增商品"></i>
    </header>

    <!-- 商品列表 -->
    <div class="food-list" v-if="foodList.length > 0">
      <div 
        class="food-item" 
        v-for="food in foodList" 
        :key="food.id"
      >
        <div class="food-image-container">
          <img 
            v-if="food.foodImg" 
            :src="food.foodImg" 
            alt="商品图片"
          />
          <img 
            v-else-if="food.id" 
            :src="imageApi.getFoodImageBinary(food.id)" 
            alt="商品图片"
            @error="handleFoodImageError($event, food.id)"
          />
          <img v-else :src="getFoodImage(food.id)" alt="商品图片" />
          <div class="image-upload-overlay" @click="openImageUploader(food)">
            <i class="fa fa-camera"></i>
            <span>更换图片</span>
          </div>
        </div>
        <div class="food-info">
          <div class="food-info-header">
            <h3>{{ food.foodName }}</h3>
            <div class="food-price">¥{{ food.foodPrice }}</div>
          </div>
          <p class="food-explain">{{ food.foodExplain || '暂无描述' }}</p>
          <div class="food-actions">
            <button class="btn-edit" @click="editFood(food)">
              <i class="fa fa-edit"></i> 编辑
            </button>
            <button class="btn-delete" @click="deleteFood(food)">
              <i class="fa fa-trash"></i> 删除
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 加载中状态 -->
    <div v-else-if="loading" class="loading">
      <p>加载中...</p>
    </div>

    <!-- 空状态 -->
    <div v-else class="empty">
      <i class="fa fa-cutlery"></i>
      <p>暂无商品，点击右上角添加商品</p>
      <button class="btn-add-empty" @click="addFood">添加第一个商品</button>
    </div>

    <!-- 商品编辑弹窗 -->
    <div class="modal-overlay" v-if="showEditModal" @click="closeModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>{{ editingFood.foodId ? '编辑商品' : '新增商品' }}</h3>
          <i class="fa fa-times" @click="closeModal"></i>
        </div>
        <div class="modal-body">
          <div class="form-image-upload">
            <div class="preview-image-container">
              <img 
                v-if="previewImage" 
                :src="previewImage" 
                alt="商品图片预览"
              />
              <img 
                v-else-if="editingFood.foodImg" 
                :src="editingFood.foodImg" 
                alt="商品图片预览"
              />
              <img 
                v-else-if="editingFood.foodId" 
                :src="imageApi.getFoodImageBinary(editingFood.foodId)" 
                alt="商品图片预览"
                @error="handleEditFoodImageError"
              />
              <div v-else class="no-image">
                <i class="fa fa-image"></i>
                <span>暂无图片</span>
              </div>
            </div>
            <button class="btn-upload-image" @click="triggerImageSelect">
              <i class="fa fa-upload"></i> 上传图片
            </button>
          </div>
          <div class="form-group">
            <label>商品名称：</label>
            <input 
              type="text" 
              v-model="editingFood.foodName" 
              placeholder="请输入商品名称"
              maxlength="50"
            />
          </div>
          <div class="form-group">
            <label>商品价格：</label>
            <input 
              type="number" 
              v-model="editingFood.foodPrice" 
              placeholder="请输入商品价格"
              min="0"
              step="0.01"
            />
          </div>
          <div class="form-group">
            <label>商品描述：</label>
            <textarea 
              v-model="editingFood.foodExplain" 
              placeholder="请输入商品描述（可选）"
              rows="3"
              maxlength="200"
            ></textarea>
          </div>
          <div class="form-group">
            <label>备注信息：</label>
            <input 
              type="text" 
              v-model="editingFood.remarks" 
              placeholder="备注信息（可选）"
              maxlength="100"
            />
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn-cancel" @click="closeModal">取消</button>
          <button class="btn-save" @click="saveFood" :disabled="!canSave">
            {{ editingFood.foodId ? '保存' : '添加' }}
          </button>
        </div>
      </div>
    </div>

    <!-- 图片上传输入 -->
    <input 
      ref="imageInput" 
      type="file" 
      accept="image/*" 
      style="display:none" 
      @change="handleImageSelect" 
    />

  </div>
</template>

<script setup>

import { useRouter } from "vue-router";
import { ref, inject, onMounted, computed } from "vue";
import { foodApi, imageApi } from '@/api';
import api from '@/api';

// 导入商品图片
import sp01 from '@/assets/sp01.png'
import sp02 from '@/assets/sp02.png'
import sp03 from '@/assets/sp03.png'
import sp04 from '@/assets/sp04.png'
import sp05 from '@/assets/sp05.png'
import sp06 from '@/assets/sp06.png'
import sp07 from '@/assets/sp07.png'
import sp08 from '@/assets/sp08.png'
import sp09 from '@/assets/sp09.png'
import sp10 from '@/assets/sp10.png'
import sp11 from '@/assets/sp11.png'
import sp12 from '@/assets/sp12.png'

const axios = inject("axios");
const router = useRouter();

const business = ref(null);
const foodList = ref([]);
const loading = ref(true);
const showEditModal = ref(false);
const editingFood = ref({
  foodId: null,
  foodName: '',
  foodPrice: '',
  foodExplain: '',
  foodImg: '',
  remarks: '',
  businessId: null
});
const imageInput = ref(null);
const previewImage = ref('');
const currentEditingFoodId = ref(null);

// 计算是否可以保存
const canSave = computed(() => {
  return editingFood.value.foodName.trim() !== '' && 
         editingFood.value.foodPrice > 0;
});

// 获取商品图片
const getFoodImage = (foodId) => {
  const id = parseInt(foodId) % 12; // 使用模运算确保ID在1-12范围内
  const imageMap = {
    0: sp12,
    1: sp01, 2: sp02, 3: sp03, 4: sp04, 5: sp05,
    6: sp06, 7: sp07, 8: sp08, 9: sp09, 10: sp10,
    11: sp11, 12: sp12
  };
  return imageMap[id] || sp01;
};

// 处理食品图片加载失败
const handleFoodImageError = (event, foodId) => {
  console.warn(`食品图片加载失败，尝试使用默认图片: foodId=${foodId}`);
  event.target.src = getFoodImage(foodId);
};

// 处理编辑弹窗中的食品图片加载失败
const handleEditFoodImageError = (event) => {
  console.warn(`编辑弹窗中的食品图片加载失败，尝试使用默认图片: foodId=${editingFood.value.foodId}`);
  event.target.src = imageApi.getFoodImageBinary(editingFood.value.foodId);
};

// 打开图片上传器(用于列表中的商品)
const openImageUploader = (food) => {
  currentEditingFoodId.value = food.id;
  imageInput.value.click();
};

// 触发图片选择(用于编辑弹窗中)
const triggerImageSelect = () => {
  // 明确设置为编辑模式，而不是列表更新模式
  currentEditingFoodId.value = editingFood.value.foodId;
  imageInput.value.click();
};

// 处理图片选择
const handleImageSelect = async (event) => {
  const file = event.target.files[0];
  if (!file) return;
  
  try {
    console.log('选择的图片文件:', file.name, '类型:', file.type, '大小:', file.size, 'bytes');
    
    // 检查文件类型和大小
    const validTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
    if (!validTypes.includes(file.type)) {
      console.error('无效的文件类型:', file.type);
      alert('请上传有效的图片文件 (JPG, PNG, GIF, WEBP)');
      return;
    }
    
    if (file.size > 5 * 1024 * 1024) { // 5MB
      console.error('文件过大:', file.size, 'bytes');
      alert('图片大小不能超过5MB');
      return;
    }
    
    // 创建本地预览（无论是从列表还是编辑弹窗都创建预览）
    const reader = new FileReader();
    reader.onload = (e) => {
      previewImage.value = e.target.result;
      console.log('本地预览图片已创建');
    };
    reader.readAsDataURL(file);
    
    // 上传图片
    console.log('准备上传图片, 商品ID:', currentEditingFoodId.value);
    const imageUrl = await uploadFoodImage(file, currentEditingFoodId.value);
    if (imageUrl) {
      console.log('图片上传成功, URL:', imageUrl);
      
      // 如果是在编辑弹窗中，更新编辑中的商品图片
      if (showEditModal.value) {
        editingFood.value.foodImg = imageUrl;
      }
    } else {
      console.error('图片上传失败, 未返回URL');
    }
    
  } catch (error) {
    console.error('处理图片错误:', error);
    alert('处理图片失败: ' + (error.message || '未知错误'));
  } finally {
    // 重置文件输入以允许再次选择同一文件
    event.target.value = '';
  }
};

// 上传食品图片
const uploadFoodImage = async (file, foodId = null) => {
  try {
    console.log('开始上传食品图片, 商品ID:', foodId);
    alert('正在上传图片...');
    
    // 调用上传API，传递foodId
    console.log('调用上传API, 文件:', file.name, 'foodId:', foodId);
    const result = await imageApi.uploadFoodImage(file, foodId);
    console.log('上传API响应结果:', result);
    
    if (result && result.url) {
      console.log('图片上传成功, 返回URL:', result.url);
      
      // 如果是从列表直接更新图片
      if (foodId) {
        console.log('更新列表中商品的图片, 商品ID:', foodId);
        // 不需要再单独更新数据库，因为上传时已经更新
        
        // 更新本地列表中的图片
        foodList.value = foodList.value.map(item => {
          if (item.id === foodId) {
            console.log('找到匹配的商品, 更新图片URL');
            return { ...item, foodImg: result.url };
          }
          return item;
        });
      } else {
        // 如果是在编辑弹窗中上传，只更新本地预览和编辑数据
        console.log('更新编辑中的商品图片');
        // 注意：不在这里更新editingFood.value.foodImg，而是返回URL让调用者处理
      }
      
      alert('图片上传成功!');
      return result.url;
    } else {
      console.error('上传图片失败, API返回结果不包含URL:', result);
      alert('上传图片失败，请重试');
      return null;
    }
  } catch (error) {
    console.error('上传图片错误:', error);
    if (error.response) {
      console.error('错误状态码:', error.response.status);
      console.error('错误信息:', error.response.data);
    }
    alert('上传图片失败: ' + (error.message || '未知错误'));
    return null;
  }
};

// 加载商品列表
const loadFoodList = async () => {
  if (!business.value) return;
  
  loading.value = true;
  try {
    // 使用新的API接口获取商家的食品列表
    const foods = await foodApi.getFoodListByBusinessId(business.value.id);
    console.log("获取到的原始食品列表:", foods);
    
    // 处理食品列表，确保数据结构统一
    foodList.value = foods.map(food => ({
      id: food.id,
      foodId: food.id, // 兼容旧代码，同时使用foodId和id
      foodName: food.foodName || '',
      foodPrice: food.foodPrice || 0,
      foodExplain: food.foodExplain || '',
      foodImg: food.foodImg || '',
      remarks: food.remarks || '',
      business: food.business,
      businessId: food.business ? food.business.id : business.value.id
    }));
    
    console.log("处理后的食品列表:", foodList.value);
    console.log("加载商品列表成功，共", foodList.value.length, "个商品");
  } catch (error) {
    console.error("加载商品列表失败:", error);
    alert("加载商品列表失败，请刷新重试");
    foodList.value = [];
  } finally {
    loading.value = false;
  }
};

// 新增商品
const addFood = () => {
  editingFood.value = {
    foodId: null,
    foodName: '',
    foodPrice: '',
    foodExplain: '',
    foodImg: '',
    remarks: '',
    businessId: business.value.id
  };
  previewImage.value = '';
  showEditModal.value = true;
};

// 编辑商品
const editFood = (food) => {
  console.log("编辑商品:", food);
  editingFood.value = {
    foodId: food.id, // 使用id作为foodId
    foodName: food.foodName,
    foodPrice: food.foodPrice,
    foodExplain: food.foodExplain || '',
    foodImg: food.foodImg || '',
    remarks: food.remarks || '',
    businessId: food.business ? food.business.id : business.value.id
  };
  previewImage.value = '';
  console.log("编辑商品数据:", editingFood.value);
  showEditModal.value = true;
};

// 删除商品
const deleteFood = async (food) => {
  if (!confirm(`确定要删除商品"${food.foodName}"吗？`)) {
    return;
  }
  
  try {
    await api.delete(`/api/foods/${food.id}`);
    // 从列表中移除
    foodList.value = foodList.value.filter(f => f.id !== food.id);
    
    console.log("删除商品成功");
    
    alert("商品删除成功！");
    // 重新加载商品列表
    loadFoodList();
  } catch (error) {
    console.error("删除商品失败:", error);
    alert("删除商品失败，请重试");
  }
};

// 保存商品
const saveFood = async () => {
  // 验证数据
  if (!editingFood.value.foodName.trim()) {
    alert("商品名称不能为空！");
    return;
  }
  
  if (!editingFood.value.foodPrice || editingFood.value.foodPrice <= 0) {
    alert("商品价格必须大于0！");
    return;
  }
  
  // 确保有商家ID
  if (!editingFood.value.businessId) {
    editingFood.value.businessId = business.value.id;
  }
  
  // 移除重复上传图片的逻辑，因为图片已经在选择时上传
  
  const isEditing = !!editingFood.value.foodId;
  const apiUrl = isEditing ? `/api/foods/${editingFood.value.foodId}` : '/api/foods';
  
  try {
    const requestData = {
      foodName: editingFood.value.foodName.trim(),
      foodPrice: parseFloat(editingFood.value.foodPrice),
      foodExplain: editingFood.value.foodExplain.trim(),
      foodImg: editingFood.value.foodImg,
      remarks: editingFood.value.remarks.trim(),
      business: {
        id: editingFood.value.businessId
      }
    };
    
    // 如果是编辑，添加ID字段
    if (isEditing) {
      requestData.id = editingFood.value.foodId;
    }
    
    console.log("保存商品请求数据:", requestData);
    
    let response;
    if (isEditing) {
      try {
        // 使用PUT方法更新食品
        console.log("发送PUT请求到", apiUrl);
        response = await api.put(apiUrl, requestData);
        console.log("PUT请求成功，响应:", response);
      } catch (putError) {
        console.error("PUT请求失败，尝试使用POST方法:", putError);
        
        // 如果PUT失败，尝试使用POST方法
        response = await api.post('/api/foods', {
          ...requestData,
          id: editingFood.value.foodId // 确保包含ID
        });
        console.log("POST请求成功，响应:", response);
      }
    } else {
      // 使用POST方法新增食品
      console.log("发送POST请求到", apiUrl);
      response = await api.post(apiUrl, requestData);
      console.log("POST请求成功，响应:", response);
    }
    
    console.log("保存商品响应:", response);
    
    // 商品保存成功
    alert(isEditing ? "商品修改成功！" : "商品添加成功！");
    closeModal();
    // 重新加载商品列表
    loadFoodList();
  } catch (error) {
    console.error("保存商品失败:", error);
    
    // 更详细的错误处理
    if (error.response) {
      console.error("错误状态码:", error.response.status);
      console.error("错误信息:", error.response.data);
      
      if (error.response.status === 403) {
        alert("权限不足，无法修改该商品！请联系管理员。");
      } else {
        alert(`保存商品失败: ${error.response.data.message || '请重试'}`);
      }
    } else {
      alert("保存商品失败，请重试");
    }
  }
};

// 关闭弹窗
const closeModal = () => {
  showEditModal.value = false;
  editingFood.value = {
    foodId: null,
    foodName: '',
    foodPrice: '',
    foodExplain: '',
    foodImg: '',
    remarks: '',
    businessId: null
  };
  previewImage.value = '';
};

// 页面初始化
onMounted(() => {
  // 检查登录状态
  const businessInfo = JSON.parse(localStorage.getItem('business'));
  if (!businessInfo) {
    alert("请先登录！");
    router.push({ path: '/businessLogin' });
    return;
  }
  
  business.value = businessInfo;
  console.log("当前登录商家:", business.value);
  
  // 加载商品列表
  loadFoodList();
});
</script>

<style scoped>
.wrapper {
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 20px;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* header样式 */
header {
  width: 100%;
  max-width: 100vw;
  height: 12vw;
  background-color: #0097ff;
  color: #fff;
  font-size: 4.5vw;
  box-sizing: border-box;
  
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4vw;
}

header .fa-angle-left {
  font-size: 5.5vw;
  cursor: pointer;
  color: #fff;
}

header span {
  flex: 1;
  text-align: center;
  font-weight: bold;
}

header .fa-plus {
  font-size: 5vw;
  cursor: pointer;
  color: #fff;
}

/* 商品列表样式 */
.food-list {
  width: 100%;
  max-width: 100vw;
  background-color: #fff;
  margin-top: 12vw;
  padding-bottom: 2vw;
  min-height: calc(100vh - 12vw - 20px);
  box-sizing: border-box;
}

.food-item {
  width: 100%;
  max-width: 100%;
  padding: 3vw;
  border-bottom: 1px solid #f0f0f0;
  box-sizing: border-box;
  
  display: flex;
  align-items: flex-start;
  gap: 3vw;
}

.food-image-container {
  position: relative;
  width: 15vw;
  height: 15vw;
  border-radius: 2vw;
  flex-shrink: 0;
  overflow: hidden;
}

.food-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2vw;
}

.image-upload-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  opacity: 0;
  transition: opacity 0.3s;
  cursor: pointer;
}

.image-upload-overlay:hover {
  opacity: 1;
}

.image-upload-overlay i {
  font-size: 4vw;
  margin-bottom: 0.5vw;
}

.image-upload-overlay span {
  font-size: 2vw;
}

.food-info {
  flex: 1;
  min-width: 0;
}

.food-info-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2vw;
  gap: 2vw;
}

.food-info-header h3 {
  font-size: 3.5vw;
  color: #333;
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.food-price {
  font-size: 3.5vw;
  font-weight: bold;
  color: #ff6b35;
  flex-shrink: 0;
  white-space: nowrap;
}

.food-explain {
  font-size: 2.8vw;
  color: #999;
  margin: 0 0 1.5vw 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.food-actions {
  display: flex;
  gap: 2vw;
  margin-top: 1vw;
}

.food-actions button {
  flex: 1;
  height: 7vw;
  border: none;
  border-radius: 1vw;
  font-size: 2.8vw;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 15vw;
  white-space: nowrap;
}

.btn-edit {
  background-color: #0097ff;
  color: #fff;
}

.btn-edit:hover {
  background-color: #0078cc;
}

.btn-delete {
  background-color: #ff4757;
  color: #fff;
}

.btn-delete:hover {
  background-color: #ff3742;
}

/* 加载和空状态样式 */
.loading, .empty {
  width: 100%;
  padding: 8vw 4vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 3.5vw;
  color: #999;
  background-color: #fff;
  margin-top: 12vw;
  min-height: 40vw;
}

.empty .fa-cutlery {
  font-size: 12vw;
  color: #ddd;
  margin-bottom: 3vw;
}

.btn-add-empty {
  margin-top: 4vw;
  padding: 3vw 6vw;
  background-color: #0097ff;
  color: #fff;
  border: none;
  border-radius: 2vw;
  font-size: 3.5vw;
  cursor: pointer;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4vw;
}

.modal-content {
  width: 100%;
  max-width: 90vw;
  max-height: 80vh;
  background-color: #fff;
  border-radius: 3vw;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4vw;
  background-color: #0097ff;
  color: #fff;
}

.modal-header h3 {
  font-size: 4.5vw;
  margin: 0;
}

.modal-header .fa-times {
  font-size: 5vw;
  cursor: pointer;
}

.modal-body {
  padding: 4vw;
  max-height: 50vh;
  overflow-y: auto;
}

.form-image-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 4vw;
  padding-bottom: 4vw;
  border-bottom: 1px solid #f0f0f0;
}

.preview-image-container {
  width: 30vw;
  height: 30vw;
  border-radius: 2vw;
  overflow: hidden;
  margin-bottom: 3vw;
  border: 1px dashed #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
}

.preview-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.no-image {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #999;
}

.no-image i {
  font-size: 8vw;
  margin-bottom: 2vw;
}

.no-image span {
  font-size: 3vw;
}

.btn-upload-image {
  padding: 2vw 4vw;
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 1vw;
  font-size: 3vw;
  cursor: pointer;
  color: #666;
  display: flex;
  align-items: center;
  gap: 1vw;
}

.btn-upload-image:hover {
  background-color: #f0f0f0;
}

.form-group {
  margin-bottom: 4vw;
}

.form-group label {
  display: block;
  font-size: 3.5vw;
  color: #333;
  margin-bottom: 2vw;
  font-weight: bold;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 3vw;
  border: 1px solid #ddd;
  border-radius: 1vw;
  font-size: 3.5vw;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #0097ff;
}

.modal-footer {
  display: flex;
  gap: 3vw;
  padding: 4vw;
  background-color: #f8f8f8;
}

.modal-footer button {
  flex: 1;
  height: 10vw;
  border: none;
  border-radius: 2vw;
  font-size: 3.8vw;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-cancel {
  background-color: #ddd;
  color: #666;
}

.btn-save {
  background-color: #38ca73;
  color: #fff;
}

.btn-save:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* 响应式适配 */
@media (max-width: 480px) {
  header {
    height: 50px;
    padding: 0 16px;
    font-size: 18px;
  }
  
  header .fa-angle-left {
    font-size: 20px;
  }
  
  header .fa-plus {
    font-size: 18px;
  }
  
  .food-list {
    margin-top: 50px;
    min-height: calc(100vh - 50px - 20px);
  }
  
  .food-item {
    padding: 12px;
    gap: 12px;
  }
  
  .food-image-container {
    width: 50px;
    height: 50px;
  }
  
  .food-info-header {
    gap: 8px;
  }
  
  .food-info-header h3 {
    font-size: 14px;
  }
  
  .food-price {
    font-size: 14px;
  }
  
  .food-explain {
    font-size: 12px;
  }
  
  .food-actions {
    gap: 8px;
    margin-top: 4px;
  }
  
  .food-actions button {
    height: 28px;
    font-size: 11px;
    min-width: 60px;
  }
  
  .loading, .empty {
    margin-top: 50px;
    min-height: 200px;
    padding: 40px 20px;
    font-size: 14px;
  }
  
  .wrapper {
    padding-bottom: 20px;
    overflow-x: hidden;
  }
  
  .modal-content {
    max-width: 95vw;
  }
  
  .modal-header h3 {
    font-size: 18px;
  }
  
  .form-group label {
    font-size: 14px;
  }
  
  .form-group input,
  .form-group textarea {
    font-size: 14px;
    padding: 12px;
  }
  
  .modal-footer button {
    height: 40px;
    font-size: 15px;
  }
  
  .preview-image-container {
    width: 120px;
    height: 120px;
  }
  
  .btn-upload-image {
    font-size: 12px;
    padding: 8px 16px;
  }
  
  .image-upload-overlay i {
    font-size: 16px;
  }
  
  .image-upload-overlay span {
    font-size: 8px;
  }
}
</style> 